<template>
  <div class="item-container" @click="toDetail">
    <div class="bg-img">
      <el-image :src="objInfo.picture || placeholderImg" fit="cover">
      </el-image>
    </div>
    <div class="title text-bold">
      {{ objInfo.title }}
    </div>
    <div class="tip-list">
      <div class="item">
        <el-image
          class="item-icon"
          fit="contain"
          :src="require('@/assets/icons/home/tech-01.png')"
        >
        </el-image>

        <div class="regular-text label">所属行业:</div>
        <div class="text">{{ filedDictName(objInfo.fieldId) }}</div>
      </div>

      <div class="item">
        <el-image
          class="item-icon"
          fit="contain"
          :src="require('@/assets/icons/home/tech-02.png')"
        >
        </el-image>
        <div class="regular-text label">成果阶段:</div>
        <div class="text">{{ achStepName(objInfo.phaseId) }}</div>
      </div>

      <div class="item">
        <el-image
          class="item-icon"
          fit="contain"
          :src="require('@/assets/icons/home/tech-03.png')"
        >
        </el-image>
        <div class="regular-text label">所在地:</div>
        <div class="text">{{ objInfo.address }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModuleItem',
  props: {
    objInfo: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      placeholderImg: require('@/assets/images/tech-placeholder.png'),
      // 成果阶段
      achStepDictName: 'achievements_achievement_stage',
      achStepTypeList: [],

      // 行业类型
      positionDictName: 'user_common_field',
      positionList: [],

      // 成果类型
      achTypeDictName: 'achievements_achievement_type',
      achTypeList: [],
      detailRouteName: '/techSource/techAchievements/techAchievementDetail/',
    }
  },
  computed: {
    filedDictName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.positionList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        if (findItem) {
          return findItem['dictLabel'] ? findItem['dictLabel'] : '无'
        }
        return '无'
      }
    },
    achStepName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.achStepTypeList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        return findItem && findItem['dictLabel'] ? findItem['dictLabel'] : '无'
      }
    },
  },
  created() {
    this.initDictList()
  },
  methods: {
    initDictList() {
      this.getDictList(this.achStepDictName).then((res) => {
        if (res.code == 200) {
          this.achStepTypeList = res.data
        }
      })
      this.getDictList(this.positionDictName).then((res) => {
        if (res.code == 200) {
          this.positionList = res.data
        }
      })
    },
    toDetail() {
      let id = parseInt(this.objInfo.id)
      if (!id && id !== 0) {
        this.$message({
          type: 'error',
          message: '无效id',
        })
        return
      }
      this.$router.push({
        path: this.detailRouteName + id,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.item-container {
  width: 100%;
  padding: 15px;
  font-size: 12px;
  cursor: pointer;
  background-color: #fff;

  .bg-img {
    width: 100%;
    height: 183px;
    .el-image {
      width: 100%;
      height: 183px;
    }
  }
  .title {
    font-size: 14px;
    padding: 1rem;
  }
  .tip-list {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    padding: 0 1rem;
    .item {
      display: flex;
      align-items: ceter;
      // height: 2rem;
      @apply pb-6;
      .item-icon {
        @apply w-6 h-6;
      }
      .label {
        display: inline-block;
        padding: 0 0.5rem;
        min-width: 5rem;
        text-align-last: justify;
        @apply text-sm text-t666;
      }
      .text {
        @apply text-sm text-t333;
      }
    }
  }
}
</style>
